<template>
  <!-- 项目分组 -->
  <div class="ItemGroup">
    <div class="leftContent">
      <a-input-search
        v-model:value="groupName"
        placeholder="请输入分组名称"
        enter-button
        allow-clear
        @search="getGroupList"
      />
      <div class="proGroup">
        <a-spin :spinning="groupLoading" class="loading">
          <div class="proGroupItem" v-for="item in groupList" :key="item">
            <div class="proGroupName">
              {{ item.name }}
            </div>
            <div>
              <EditOutlined class="editBtn" @click="groupEdit(item)" />
              <a-popconfirm
                ok-text="确认"
                cancel-text="取消"
                @confirm="groupDel(item.id)"
              >
                <template #title> 是否确定删除该项目组? </template>
                <DeleteOutlined class="delBtn" />
              </a-popconfirm>
            </div>
          </div>
        </a-spin>
      </div>
    </div>
    <div class="rightContent">
      <div class="filterContent">
        <a-form :model="filterForm" layout="inline">
          <a-form-item label="电站名称">
            <a-select
              ref="select"
              v-model:value="filterForm.stationId"
              class="formInput"
              placeholder="请选择"
              show-search
              optionFilterProp="label"
              allow-clear
              style="width: 150px"
            >
              <a-select-option
                v-for="item in stationList"
                :key="item.stationId"
                :value="item.stationId"
                :label="item.stationName"
                :title="item.stationName"
              >
                {{ item.stationName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="企业名称">
            <a-select
              ref="select"
              v-model:value="filterForm.companyId"
              class="formInput"
              placeholder="请选择"
              show-search
              optionFilterProp="label"
              allow-clear
              style="width: 150px"
            >
              <a-select-option
                v-for="item in companyList"
                :key="item.id"
                :value="item.id"
                :label="item.projectName"
                :title="item.projectName"
              >
                {{ item.projectName }}
              </a-select-option>
            </a-select>
          </a-form-item>
          <a-form-item label="项目分组">
            <a-select
              ref="select"
              v-model:value="filterForm.projectGroupId"
              class="formInput"
              placeholder="请选择"
              show-search
              optionFilterProp="label"
              allow-clear
              style="width: 150px"
            >
              <a-select-option
                v-for="item in groupList"
                :key="item.id"
                :value="item.id"
                :label="item.name"
                :title="item.name"
              >
                {{ item.name }}
              </a-select-option>
            </a-select>
            <!-- <a-input
              v-model:value="filterForm.account"
              class="formInput"
              allow-clear
              placeholder="请输入"
            /> -->
          </a-form-item>
          <a-form-item label="项目标签">
            <a-input
              v-model:value="filterForm.tag"
              class="formInput"
              allow-clear
              placeholder="请输入"
            />
          </a-form-item>
          <a-button
            type="primary"
            class="filterBtn"
            @click="getGroupStationList"
            >查询</a-button
          >
          <a-button type="primary" class="filterBtn addBtn" @click="handleGroup"
            >新增</a-button
          >
        </a-form>
      </div>
      <div class="tableContent">
        <a-table
          :dataSource="tableData"
          :columns="columns"
          size="small"
          :pagination="false"
          :loading="tableLoading"
          :scroll="{ x: 'max-content' }"
        >
          <template #bodyCell="{ column, record }">
            <template v-if="column.key === 'projectGroupNames'">
              <div
                v-for="item in record.projectIdNameGroup"
                :key="item"
                class="tag"
              >
                <a-tag color="green">{{ item.projectName }}</a-tag>
              </div>
            </template>
            <template v-if="column.key === 'handle'">
              <a-popover
                title="分组挂靠"
                trigger="click"
                v-model:open="record.visible"
              >
                <template #content>
                  <a-select
                    ref="select"
                    v-model:value="groupForm.projectGroupIds"
                    class="formInput"
                    placeholder="请选择"
                    show-search
                    optionFilterProp="label"
                    allow-clear
                    mode="multiple"
                    style="width: 200px"
                  >
                    <a-select-option
                      v-for="item in groupList"
                      :key="item.id"
                      :value="item.id"
                      :label="item.name"
                      :title="item.name"
                    >
                      {{ item.name }}
                    </a-select-option>
                  </a-select>
                  <div style="text-align: right; margin-top: 15px">
                    <a-button
                      @click="cancelEditGroup(record)"
                      size="small"
                      style="margin-right: 10px"
                      >取消</a-button
                    >
                    <a-button
                      type="primary"
                      @click="sureEditGroup(record)"
                      size="small"
                      >确定</a-button
                    >
                  </div>
                </template>
                <a-button type="link" @click="editGroup(record)"
                  >分组挂靠</a-button
                >
              </a-popover>
              <a-popover
                title="编辑标签"
                trigger="click"
                v-model:open="record.tagVisible"
              >
                <template #content>
                  <a-input
                    v-model:value="tagForm.tag"
                    placeholder="请输入5字以内的项目标签"
                    allow-clear
                    style="width: 100%"
                  />
                  <div style="text-align: right; margin-top: 15px">
                    <a-button
                      @click="cancelEditTag(record)"
                      size="small"
                      style="margin-right: 10px"
                      >取消</a-button
                    >
                    <a-button
                      type="primary"
                      @click="sureEditTag(record)"
                      size="small"
                      >确定</a-button
                    >
                  </div>
                </template>
                <a-button type="link" @click="editTag(record)"
                  >编辑标签</a-button
                ></a-popover
              >
            </template>
          </template>
        </a-table>
        <a-pagination
          v-model:current="filterForm.current"
          v-model:page-size="filterForm.size"
          :total="total"
          position="bottomRight"
          show-size-changer
          @change="getGroupStationList"
          :show-total="(total) => `总共 ${total} 条`"
        >
          <template #buildOptionText="props">
            <span>{{ props.value }}条/页</span>
          </template>
        </a-pagination>
      </div>
    </div>
    <!-- 新增分组 -->
    <AddGroup
      :addGroupVisible="addGroupVisible"
      :stationList="stationList"
      :isEdit="isEdit"
      :rowData="rowData"
      @update:addGroupVisible="addGroupVisible = $event"
      @getGroupList="upDataGroupList"
    />
  </div>
</template>
<script setup>

import AddGroup from "./conpoments/addGroup.vue"
const $api = inject("$api")
const total = ref()
const filterForm = ref({
  current: 1,
  size: 10,
  stationId: null,
  companyId: null,
})

const columns = ref([
  {
    title: "电站名称",
    dataIndex: "stationName",
    key: "stationName",
    width: 200,
    align: "center",
  },
  {
    title: "企业名称",
    dataIndex: "companyName",
    key: "companyName",
    width: 200,
    align: "center",
  },
  {
    title: "省份",
    dataIndex: "provName",
    key: "provName",
    width: 120,
    align: "center",
  },
  {
    title: "城市",
    dataIndex: "cityName",
    key: "cityName",
    width: 120,
    align: "center",
  },
  {
    title: "名称缩写",
    dataIndex: "stationShortName",
    key: "stationShortName",
    width: 120,
    align: "center",
  },
  {
    title: "项目标签",
    dataIndex: "tag",
    key: "tag",
    width: 120,
    align: "center",
  },
  {
    title: "项目分组",
    dataIndex: "projectGroupNames",
    key: "projectGroupNames",
    width: 200,
    align: "center",
  },
  {
    title: "操作",
    dataIndex: "handle",
    key: "handle",
    width: 200,
    align: "center",
  },
])
//获取所有电站
const stationList = ref([])
const getStationList = async () => {
  const res = await $api.companyStationtList({})
  if (res && res.code === 0) {
    stationList.value = res.data
  }
}
//获取所有企业
const companyList = ref([])
const getCompanyList = async () => {
  const res = await $api.companyList()
  if (res && res.code === 0) {
    companyList.value = res.data
  }
}
//获取所有项目分组
const groupList = ref([])
const groupLoading = ref(false)
const groupName = ref("")
const getGroupList = async () => {
  groupLoading.value = true
  const res = await $api.projectGroupList({ groupName: groupName.value })
  if (res && res.code === 0) {
    groupList.value = res.data
  }
  groupLoading.value = false
}
//获取所有电站（带分组信息）
const tableLoading = ref(false)
const tableData = ref([])
const getGroupStationList = async () => {
  tableLoading.value = true
  const res = await $api.projectGroupPage(filterForm.value)
  if (res && res.code === 0) {
    tableData.value = res.data.records.map((item) => {
      item.visible = false
      item.tagVisible = false
      return item
    })
    total.value = res.data.total
  }
  tableLoading.value = false
}
//删除项目组
const groupDel = async (id) => {
  const res = await $api.projectGroupDel(id)
  if (res && res.code === 0) {
    message.success("删除成功")
    getGroupList()
  }
}

//打开弹窗
const addGroupVisible = ref(false)
const isEdit = ref(false)
const rowData = ref({})
const handleGroup = () => {
  isEdit.value = false
  addGroupVisible.value = true
}
//编辑项目组
const groupEdit = (data) => {
  rowData.value = data
  isEdit.value = true
  addGroupVisible.value = true
}
//新增提交后刷新数据
const upDataGroupList = () => {
  getGroupList()
  getGroupStationList()
}
//编辑项目的分组
const groupForm = ref({
  stationId: null,
  projectGroupIds: [],
})
const editGroup = (data) => {
  data.visible = true
  groupForm.value.projectGroupIds = data.projectIdNameGroup.map(
    (item) => item.projectId
  )
}
const cancelEditGroup = (data) => {
  groupForm.value = {
    stationId: null,
    projectGroupIds: [],
  }
  data.visible = false
}
const sureEditGroup = async (data) => {
  groupForm.value.stationId = data.stationId
  handleGroupEdit(data)
}
const handleGroupEdit = async (data) => {
  const res = await $api.updateStationGroup(groupForm.value)
  if (res && res.code === 0) {
    cancelEditGroup(data)
    getGroupStationList()
    getGroupList()
  }
}
//把电站从分组中删除（后来更改需求，没用上，暂时保留）
const del = (e, data) => {
  groupForm.value.stationId = data.stationId
  let filterList = data.projectIdNameGroup.filter(
    (item) => item.projectId !== e.projectId
  )
  groupForm.value.projectGroupIds = filterList.map((item) => item.projectId)
  handleGroupEdit(data)
}
//编辑标签
const tagForm = ref({
  stationId: null,
  tag: "",
})
const editTag = (data) => {
  data.tagVisible = true
}
const cancelEditTag = (data) => {
  tagForm.value = {
    stationId: null,
    tag: "",
  }
  data.tagVisible = false
}
const sureEditTag = async (data) => {
  tagForm.value.stationId = data.stationId
  tagForm.value.tag = tagForm.value.tag.replace(/\s/g, "")
  if (tagForm.value.tag.replace(/\s/g, "").length > 5) {
    message.error("项目标签不能超过5个字符")
    return
  }
  handleTagEdit(data)
}
const handleTagEdit = async (data) => {
  const res = await $api.updateStationTag(tagForm.value)
  if (res && res.code === 0) {
    cancelEditTag(data)
    getGroupStationList()
  }
}

onMounted(() => {
  getStationList()
  getCompanyList()
  getGroupList()
  getGroupStationList()
})
</script>
<style lang="less" scoped>
.ItemGroup {
  .leftContent,
  .rightContent {
    display: inline-block;
    height: calc(100vh - 90px);
    box-sizing: border-box;
    background: #141414;
    overflow-y: auto;
    padding: 20px;
    box-sizing: border-box;
  }

  .leftContent {
    width: 300px;
    margin-right: 20px;
  }

  .rightContent {
    width: calc(100% - 320px);
    .tableContent {
      .tag:not(:first-of-type) {
        margin-top: 5px;
      }
      /* .tag {
        margin: 5px;
      } */
    }
  }

  .filterContent {
    padding-top: 0;

    .addBtn {
      background-color: green;
      color: white;
      margin-left: 15px;

      &:hover {
        background-color: #529b2e;
      }
    }
  }

  .ant-form-item {
    margin-bottom: 20px;
  }
  .proGroup {
    margin-top: 20px;
    .loading {
      display: flex;
      justify-content: center;
      align-items: center;
      margin-top: 50%;
    }
    .proGroupName {
      cursor: pointer;
      display: inline-block;
    }
    .proGroupItem {
      display: flex;
      justify-content: space-between;
      height: 40px;
      line-height: 40px;
    }
    .editBtn {
      margin-right: 10px;
      color: #1655ad;
    }
    .delBtn {
      color: red;
    }
  }
}
</style>
